<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 300px;
            margin: auto;
            text-align: center;
        }

        .box1 {
            font-size: 30px;
            font-weight: bold;
        }

        .box2 input {
            height: 30px;

        }

        .box3 input,
        .box4 input,
        .box5 input,
        .box6 input,
        .box7 input {
            height: 30px;
            margin-top: 10px;
        }

        .box4 input {
            width: 50px;
            height: 30px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">
            注册账号
        </div>
        <div class="box2">
            <input type="text" placeholder="输入用户名">
        </div>
        <div class="box3">
            <input type="password" placeholder=" 输入密码">
        </div>
        <div class="box5">
            <select name="" id="">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="box6">
            <input type="text" placeholder="输入年龄">
        </div>
        <div class="box7">
            <input type="text" placeholder="输入手机号">
        </div>
        <div class="box4">
            <input type="button" value="注册">
        </div>
    </div>
</body>

</html>
<script src="./promise.js"></script>
<script>
    var oinp = document.getElementsByTagName("input")
    var osel = document.querySelector("select")
    oinp[4].onclick = function () {
        if (oinp[0].value && oinp[1].value) {
            if (/^\d{4}$/.test(oinp[1].value)) {
                ajax('get', 'https://yantianfeng.com/api/register', {
                    username: oinp[0].value,
                    password: oinp[1].value,
                    sex: osel.value,
                    age: oinp[2].value,
                    phone: oinp[3].value
                }).then((data) => {
                    console.log(data);
                    if (data.status == 200) {
                        alert('注册成功');

                    } else {
                        alert('注册失败');

                    }
                })
            } else {
                alert('请输入正确的手机号或密码')
            }
        } else {
            alert('用户名或密码不能为空')
        }
    }
</script>